<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 <%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

//会员信息----模态框
function vipCheckin(number){
	
	$.ajax({
		type:"post",
		url:"vipCheckin.do",
		data:{
			"number":number,
		},
		success:function(result){
			
			var stus = JSON.parse(result);
			for(var i = 0; i < stus.length; i++){
				var stu = "";
				stu +="<tr>";
				stu +="<td>会员卡号</td><td><input type='text' class='form-control' id='vipNumber' value='"+stus[i].number+"' readonly='readonly'></td>";
				stu +="<td>姓名</td><td><input type='text' class='form-control' id='vipName' value='"+stus[i].name+"' readonly='readonly'></td>";
				stu +="<td>性别</td><td><input type='text' class='form-control' id='vipGen' value='"+stus[i].gender+"' readonly='readonly'></td>";
				stu +="</tr><tr>";
				stu +="<td>余额</td><td><input type='text' class='form-control' id='vipMoney' value='"+stus[i].money+"' readonly='readonly'></td>";
				stu +="<td>身份证号</td><td><input type='text' class='form-control' id='vipIdNumber' value='"+stus[i].idnumber+"' readonly='readonly'></td>";
				stu +="<td>电话号码</td><td><input type='text' class='form-control' id='vipPhone' value='"+stus[i].phone+"' readonly='readonly'></td>";
			
				
			}
			$("#rCheckinTable").html(stu);
			
			selectFloor();
			queryHousetype();
		},
		error:function(){
			alert("请求失败");
		}
	})
	
	
}

//楼层下拉框
function selectFloor(){
	
	$.ajax({
		type:"post",
		url:"queryFloorAll.do",
		data:{
			
		},
		success:function(result){
			var stus = JSON.parse(result);
			var stu = "";
			stu +="<select name='floor' id='floor' class='form-control'>";
			stu +="<option value=''>默认</option>";
			
			for(var i = 0; i < stus.length; i++){
				
				stu +="<option value=''>"+stus[i].floor+"</option>";
				
			}
			stu +="</select>";
			$("#lowerBox1").html(stu);
		},
		error:function(){
			alert("系统故障")
		}
	})
}

//房型下拉框
function queryHousetype(){
	
	$.ajax({
		type:"post",
		url:"queryHousetype.do",
		data:{
			
		},
		success:function(result){
			var stus = JSON.parse(result);
			var stu = "";
			stu +="<select name='housetype' id='housetype' class='form-control'>";
			stu +="<option value=''>默认</option>";
			for(var i = 0; i < stus.length; i++){
				
				stu +="<option value=''>"+stus[i].housetype+"</option>";
				
			}
			stu +="</select>";
			$("#lowerBox2").html(stu);
		},
		error:function(){
			
		}
	})
}

//模态框 --查找空房
function selectRoom(){
	var floor = $("#floor").find("option:selected").text();
	var housetype = $("#housetype").find("option:selected").text();

	$.ajax({
		type:"post",
		url:"selectRoom.do",
		data:{
			"floor":floor,
			"housetype":housetype,
		},
		success:function(result){
			var stus = JSON.parse(result);
			if(stus.length > 0){
				var stu = "";
				stu +="<select name='roomNumber' id='roomNumber' class='form-control'>";
				
				for(var i = 0; i < stus.length; i++){
					
					stu +="<option value=''>"+stus[i].roomnum+"</option>";
					
				}
				stu +="</select>";
				$("#roomBox").html(stu);
			}else{
				$("#roomBox").html("没有匹配房间");
			}
			
		},
		error:function(){
			alert("系统故障")
		}
	})
}

//入住办理
function checkIn(){
	
	var vipNumber = $("#vipNumber").val();
	var roomNumber = $("#roomNumber").find("option:selected").text();
	var people = $("#people").val();
	var remarks = $("#remarks").val();
	if(people == null || people ==""){
		alert("请输入入住人数")
		
	}else{
		window.location.href="checkIn.do?vipNumber="+vipNumber+"&roomNumber="+roomNumber+"&people="+people+"&remarks="+remarks;
	}
}

//详细信息
function vipDetailedInf(id){
	$.ajax({
		type:"post",
		url:"vipDetailedInf.do",
		data:{
			"id":id,
		},
		success:function(result){
			stus = JSON.parse(result)
			for(var i = 0; i < stus.length; i++ ){
				var stu = "";
				stu +="<tr>";
				stu +="<td>会员卡号</td>";
				stu +="<td><input type='text' class='form-control' id='vipIdNumber' value='"+stus[i].number+"' readonly='readonly'></td>";
				stu +="<td>姓名</td>";
				stu +="<td><input type='text' class='form-control' id='vipIdNumber' value='"+stus[i].name+"' readonly='readonly'></td>";
				stu +="</tr>";
				stu +="<tr>";
				stu +="<td>性别</td>";
				stu +="<td><input type='text' class='form-control' id='vipIdNumber' value='"+stus[i].gender+"' readonly='readonly'></td>";
				stu +="<td>年龄</td>";
				stu +="<td><input type='text' class='form-control' id='vipIdNumber' value='"+stus[i].age+"' readonly='readonly'></td>";
				stu +="</tr>";
				stu +="<tr>";
				stu +="<td>出生年月日</td>";
				stu +="<td><input type='text' class='form-control' id='vipIdNumber' value='"+stus[i].reserved1+"' readonly='readonly'></td>";
				stu +="<td>会员等级</td>";
				stu +="<td><input type='text' class='form-control' id='vipIdNumber' value='"+stus[i].grade+"' readonly='readonly'></td>";
				stu +="</tr>";
				stu +="<tr>";
				stu +="<td>身份证号码</td>";
				stu +="<td><input type='text' class='form-control' id='vipIdNumber' value='"+stus[i].idnumber+"' readonly='readonly'></td>";
				stu +="<td>居住地址</td>";
				stu +="<td><input type='text' class='form-control' id='vipIdNumber' value='"+stus[i].address+"' readonly='readonly'></td>";
				stu +="</tr>";
				stu +="<tr>";
				stu +="<td>电话号码</td>";
				stu +="<td><input type='text' class='form-control' id='vipIdNumber' value='"+stus[i].phone+"' readonly='readonly'></td>";
				stu +="<td>余额</td>";
				stu +="<td><input type='text' class='form-control' id='vipIdNumber' value='"+stus[i].money+"￥' readonly='readonly'></td>";
				stu +="</tr>";
				stu +="<tr>";
				stu +="<td >备注</td>";
				stu +="<td colspan='3'>"+stus[i].remark+"</td>";
				stu +="</tr>";
				
				}
			$("#detailedTable").html(stu);
		},
		error:function(){
			
		}
	})
}

//通过input的输入内容查询VIP
function selectVipByother(){
	
	var clientNumber = $("#clientNumber").val();
	var clientfName = $("#clientfName").val();
	var clientId = $("#clientId").val();
	if(clientNumber == "" && clientfName == "" && clientId == ""){
		window.location.href="queryVipAll2.do"
	}
	$.ajax({
		type:"post",
		url:"selectVipByother.do",
		data:{
			"clientNumber":clientNumber,
			"clientfName":clientfName,
			"clientId":clientId,
		},
		success:function(result){
			stus = JSON.parse(result)
			for(var i = 0; i < stus.length; i++ ){
				var stu = "";
				stu +="<tr><th>卡号</th><th>姓名</th><th>性别</th><th>年龄</th><th>会员等级</th><th>身份证号</th><th>电话号码</th><th>卡内余额</th><th>操作</th></tr>";
				stu +="<tr><td>"+stus[i].number+"</td><td>"+stus[i].name+"</td><td>"+stus[i].gender+"</td><td>"+stus[i].age+"</td>";
				stu +="<td>"+stus[i].grade+"</td><td>"+stus[i].idnumber+"</td>";
				stu +="<td>"+stus[i].phone+"</td><td>"+stus[i].money+"</td><td>&nbsp;&nbsp;";
				stu +="<button onclick='vipDetailedInf("+stus[i].number+")'  class='btn btn-success' data-toggle='modal' data-target='#detailedModal'>查看详细信息</button>";
				stu +="&nbsp;&nbsp;";
				stu +="<button onclick='vipCheckin("+stus[i].number+")'  class='btn btn-success' data-toggle='modal' data-target='#myModal'>入住办理</button>";
				
				}
			$("#page1").remove();
			$("#Inftable").empty();
			$("#Inftable").html(stu);
			
		},
		error:function(){
			
		}
	})
}

//刷新
function refresh(){
	window.location.href="queryVipAll2.do";
}


</script>
</head>
<script type="text/javascript" src="<%=basePath%>Js/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="<%=basePath%>css/mycss/bootstrap.min.css" />

        <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>


<body>
<hr><h3 align="center">会员列表</h3><hr><br>
<table >
<tr><td>卡号：</td><td><input type="text" name="clientNumber" id="clientNumber" class="form-control" placeholder="请输入会员卡号" value=""></td>
<td>&nbsp;&nbsp;姓名：</td><td><input type="text" name="clientfName" id="clientfName" class="form-control" placeholder="请输入姓名" value=""></td>
<td>&nbsp;&nbsp;身份证号码：</td><td><input type="text" name="clientId" id="clientId" class="form-control" placeholder="请输入身份证号" value=""></td>
<td>&nbsp;&nbsp;<button class="btn btn-primary" onclick="selectVipByother()">查询</button>&nbsp;&nbsp; </td>
<td><button onclick="refresh()"  class="btn btn-success" >刷新列表</button></td>
</tr>
</table><br>

	<table border="1" class="table table-bordered" id="Inftable">
		<tr>
			<th>卡号</th>
			<th>姓名</th>
			<th>性别</th>
			<th>年龄</th>
			<th>会员等级</th>
			<th>身份证号</th>
			<th>电话号码</th>
			<th>卡内余额</th>
			<th>操作</th>
		</tr>
		<c:forEach items="${pageInfo.list}" var="clientList">
			<tr>
				<td>${clientList.number}</td>
				<td>${clientList.name}</td>
				<td>${clientList.gender}</td>
				<td>${clientList.age}</td>
				<td>${clientList.grade}</td>
				<td>${clientList.idnumber}</td>
				<td>${clientList.phone}</td>
				<td>${clientList.money}</td>
				<td>&nbsp;&nbsp;
					<button onclick="vipDetailedInf('${clientList.number}')"
						class="btn btn-success" data-toggle="modal"
						data-target="#detailedModal">查看详细信息</button> &nbsp;&nbsp;
					<button onclick="vipCheckin('${clientList.number}')"
						class="btn btn-success" data-toggle="modal" data-target="#myModal">入住办理</button>
		</c:forEach>
	</table>


	<div id="page1">
	<c:if test="${!pageInfo.isFirstPage }">
					<a href="${pageContext.request.contextPath }/queryVipAll2.do">首页</a>
					<a href="${pageContext.request.contextPath }/queryVipAll2.do?pageNum=${pageInfo.prePage}">上一页</a>
				</c:if>
				<c:if test="${!pageInfo.isLastPage }">
				<a href="${pageContext.request.contextPath }/queryVipAll2.do?pageNum=${pageInfo.nextPage}">下一页</a>
				<a href="${pageContext.request.contextPath }/queryVipAll2.do?pageNum=${pageInfo.lastPage}">末页</a>
				</c:if>
				当前页：${pageInfo.pageNum }/${pageInfo.pages }.
				</div>



				<!-- 会员入住办理模态框（Modal） -->
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h3 class="modal-title" id="myModalLabel" align="center">
							会员入住办理
						</h3>
					</div>
					<div class="modal-body" >
							<table class="table table-bordered" id="rCheckinTable">
                            </table>
					</div>
					<div class="modal-footer" id="">
					<table class="table table-bordered" id="lowerTable">
					<tr><td>楼层选择</td><td id="lowerBox1"></td><td>房型选择</td><td id="lowerBox2"></td>
					<td id="lowerBox3"><button onclick="selectRoom()" type="button" class="btn btn-success">确认选择</button>
					</td></tr>
					<tr><td>房间选择</td><td id="roomBox"></td><td>入住人数</td><td><input type="text" class="form-control" id="people" placeholder="请输入入住人数"></td>
					<td rowspan="2"><button onclick="checkIn()" type="button" class="btn btn-success">办理入住</button></td></tr>
					<tr>
					<td>备注</td>
					<td colspan="3"><textarea rows="3" cols="25" name="remarks" id="remarks"
								class="form-control"></textarea></td>
					</tr>
					
                     </table>
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>
		
					<!-- 详细信息模态框（Modal） -->
		<div class="modal fade" id="detailedModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
			<div class="modal-dialog">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
							&times;
						</button>
						<h3 class="modal-title" id="myModalLabel" align="center">
							会员详细信息
						</h3>
					</div>
					<div class="modal-body" >
							<table class="table table-bordered" id="detailedTable">
							
							
                            </table>
					</div>
					<div class="modal-footer" id="">
			
					</div>
				</div><!-- /.modal-content -->
			</div><!-- /.modal -->
		</div>

</body>
</html>